<template>
  <div>
    <div class="login_container">
      <div class="login_box">
        <div class="avatar_box">
          <img src="../../public/favicon.png" alt="" />
        </div>
        <div class="login_form">
          <a-form
            :form="form"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 18 }"
          >
            <a-form-item label="用户名">
              <a-input
                v-decorator="[
                  'username',
                  {
                    rules: [
                      { required: true, message: '请输入你的姓名' },
                      {
                        pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/,
                        message: '请正确输入你的姓名',
                      },
                    ],
                  },
                ]"
                placeholder="请输入你的姓名"
              />
            </a-form-item>
            <a-form-item label="密码">
              <a-input
                v-decorator="[
                  'password',
                  {
                    rules: [
                      { required: true, message: '请输入你的密码' },
                      { min: 3, max: 6, message: '密码最小3位最大6位' },
                    ],
                  },
                ]"
                placeholder="请输入你的密码"
              />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
              <a-button type="primary" html-type="submit" @click="loginForm">
                登录
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: "dynamic_rule" }),
    };
  },
  methods: {
    loginForm() {
      this.form.validateFields(async (err) => {
        if (!err) {
          const { data: res } = await this.$http.post(
            "login",
            this.form.getFieldsValue()
          );
          if (res.meta.status !== 200) {
            return this.$message.info("登录失败");
          }
          this.$message.success("登录成功");
          window.sessionStorage.setItem("token", res.data.token);
          this.$router.push("/home");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/* // lang="less" 支持less格式
// scoped vue的指令，只在当前组件生效 */
.login_container {
  width: 100%;
  background-color: #2b4b6b;
  height: 100vh;
}
.login_box {
  width: 450px;
  height: 360px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  background-color: #fff;
  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}
.login_form {
  position: absolute;
  bottom: 20px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: center;
  align-items: center;
}
.info {
  font-size: 13px;
  margin: 10px 15px;
}
</style>
